<!--
 * @Descripttion: 菜单组件，负责和用户打交道。
 * @version: 1.0
 * @Author: 自由如风
 * @Date: 2021-05-22 11:32:18
 * @LastEditors: 自由如风
 * @LastEditTime: 2021-05-22 20:25:15
-->

<template>
  <div class="menu">
    <div class="control">
      <button @click="$store.commit('switchQrcodeState')" v-color="qrcode_show">
        二维码
      </button>
      <button @click="$store.commit('switechAlignState')" v-color="align">
        对齐
      </button>
      <button @click="$store.commit('switechBarrageState')" v-color="barrage">
        弹幕
      </button>
      <button @click="clean">清除</button>
      <button v-color="bgstate">
        背景
        <input type="file" @change="bg" name="" placeholder="s" id="" />
      </button>
      <button @click="$store.commit('addspeed')">加速</button>
      <button @click="$store.commit('subspeed')">减速</button>
      <button @click="fxdelay" v-color="T">带节奏</button>
    </div>
  </div>
</template>

<script>
import CONTENT from "../assets/content.json";
export default {
  data() {
    return {
      bgstate: false,
      // 定时器种子
      T: null,
    };
  },
  computed: {
    qrcode_show() {
      return this.$store.state.setting.qrcode_show;
    },
    barrage() {
      return this.$store.state.setting.barrage;
    },
    /** 对齐 */
    align() {
      return this.$store.state.setting.align;
    },
  },
  methods: {
    /** 清除所有弹幕 */
    clean() {
      document.querySelectorAll(".barrage").forEach((e) => {
        e.remove();
      });
    },
    /** 上传背景 */
    bg(e) {
      const file = e.srcElement.files[0];
      if (!/image\/\w+/.test(file.type)) {
        alert("文件必须为图片！");
        this.bgstate = false;
        return false;
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
          document.body.style.backgroundImage = `url(${this.result})`;
        };
        this.bgstate = true;
      }
    },
    // 带节奏
    fxdelay() {
      if (this.T) {
        clearInterval(this.T);
        this.T = null;
      } else {
        this.T = setInterval(() => {
          const R = Math.random();

          setTimeout(() => {
            this.$parent.$refs.barragecontainer.add({
              content: CONTENT[Math.floor(R * CONTENT.length)],
            });
          }, parseInt(R * 1000));
        }, 321);
      }
    },
  },
  directives: {
    /** 依据传入的布尔值设置颜色，true(开启),false(关闭) */
    color(el, binding) {
      if (binding.value) {
        el.style.backgroundColor = "#4662d9";
      } else {
        el.style.backgroundColor = "#888888";
      }
    },
  },
};
</script>

<style scoped>
.menu {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  z-index: 9;
  transform: translateY(-30px);
  transition: transform 0.5s;
  user-select: none;
}
.menu:hover {
  transform: translateY(0);
}
.menu > .control {
  display: inline-flex;
  padding: 0 1em 0.2em 1em;
  background-color: rgb(218, 218, 218);
  border-radius: 0 0 1em 1em;
}
.menu button {
  position: relative;
  box-sizing: border-box;
  outline: 0;
  -webkit-appearance: none;
  margin: 0;
  display: inline-block;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
  padding: 6px;
  border-radius: 6px;
  background: #4662d9;
  color: #fff;
  cursor: pointer;
  border: 2px solid #73a6f8;
  margin: 0.1em 1em;
}
.menu button > input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.menu button:hover {
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
}
</style>
